import React from 'react'
import { message,Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.css'
import {Route,Switch,Redirect} from 'react-router-dom';
import {useSelector,useDispatch,connect} from 'react-redux'


const Login = (props) => {
  const login = useSelector(state=>state.login.islogin)
  const dispatch = useDispatch();

  const onFinish = (values) => {
      fetch("http://101.34.58.111:8081/login",{
        method:'post',
        headers:{
          'content-type':'application/json'
        },
        body:JSON.stringify(values)
      })
      .then(res=>res.json())
      .then(res=>{
        if(res.status == 'success'){
          dispatch({type:'login',value:res.data});
          message.success('登录成功！');
          props.history.replace(props.location.state || '/');
        }else{
          message.error('用户名或者密码错误');
        }
      })
      
    };
  return (
      <div id="back">
        <div className="exter">
          <div className="fram">
            <div className="exter-son"><h2>欢迎登录</h2></div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
        <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住我</Checkbox>
        </Form.Item>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
      </Form.Item>
    </Form>
    </div>
    </div>
    </div>
    
    )
}

export default Login

